@media screen and (max-width:960px){
    body{
        display: flex;
        flex-direction: column;
    }
    .l-aside{
        width: auto !important;
    }
    .l-log{
        margin-bottom: 1rem !important;
    }
    .r-header .header-toggle{
        display: none;
    }
    .r-header nav{
        flex-direction: column;
        margin-bottom: .5rem;
    }
    .h-l-nav{
        margin-bottom: .5rem;
    }

    .l-log span{
        display: inline !important;
        position: absolute;
        left: 90%;
        top: 1.5em;
        //#right: 1.2rem;
        cursor: pointer;
    }
    .l-profile{
        justify-content: space-around !important;
    }
    .l-navigation>li:nth-child(n+2){
        display: none;
    }

}

body{
    display: flex;
    min-height: 100vh;
}
.l-aside{
    width: 22rem;
}
.l-aside,.r-header{
    background-color: rgba(47,60,72,1);
}
.l-navigation li{
    display: flex;
}
.l-profile{
    align-items: center;
    flex-direction:column;
}
.openable{
    height: auto;
    flex-wrap: wrap;
    flex-direction: column;
}

.l-sub-ul{
    width:100%;
    padding-left: 1.2rem;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.l-navigation li:nth-child(n+3){
    flex-direction: row !important;
}
.l-log,.r-header{
    height: 5rem;
    display: flex;
    align-items: center;
}
.l-log{
    /*font-size: 1.5rem;*/
    color: #fff;
    font-family: 'Playfair Display', serif;
    background-color: rgba(227,71,36,1);
    display: flex;
    justify-content: center;
    margin-bottom: 1.2rem;
}
.l-log span{
    display: none;
    /*position: absolute;
    left: .6rem;
    cursor: pointer;*/
}
.header-toggle{
    /*font-size: 2rem;*/
    color: rgba(219,219,219,.87);
    height: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;

    cursor: pointer;

}

.header-toggle:hover{
    color: rgba(196,113,52,.87);
    background-color: rgba(51, 65, 78,.4)
}
.header-form,input{
    border-radius: .5rem;
    background-color: inherit;
    outline: none;
    color: #fff;
    border: 0;
}
.header-search{
    /*font-size: 1.2rem;*/
    color: rgb(200,200,200);
    border-radius: 5rem;
    padding: .5rem  1rem;
    background-color: rgba(40,50,69,1);
}
.r-container{
    flex: 1;
    background-color: #f5f5f5;
}
.r-header nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.h-l-nav,.h-r-nav{
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    padding-right: 2rem;
}
